/**
 * ng 中对指令的解析与执行过程是这样的：

     .浏览器得到 HTML 字符串内容，解析得到 DOM 结构。
     .ng 引入，把 DOM 结构扔给 $compile 函数处理：
         -找出 DOM 结构中有变量占位符
         -匹配找出 DOM 中包含的所有指令引用
         -把指令关联到 DOM
         -关联到 DOM 的多个指令按权重排列
         -执行指令中的 compile 函数（改变 DOM 结构，返回 link 函数）
         -得到的所有 link 函数组成一个列表作为 $compile 函数的返回
     .执行 link 函数（连接模板的 scope）。

 link: 让指令动起来的方法
    link带有三个参数：scope、element、attrs
        attrs：及在页面上使用指令时，指令所带的所有属性都在这个里面，如<tree id='' class=''>, 那么attrs中将包含id和class属性
        element: 也就相当于jquery及$,可以调$对应的所有方法。在Directive中，我们不免需要对页面元素进行操作。为了提供这项功能，AngularJS几乎原版搬运了jQuery操作元素的功能，他们称之为"jQuery Lite"(jqLite)。
                AngularJS通过jqLite的调用方法angular.element，实现了jQuery中的大部分常用功能。也就是，我们可以在获取了element参数后，调用jQuery常用的语法，如bind(),addClass(),removeClass()等来直接对元素进行操作，实现我们期望的功能。
                同时，如果你希望在AngularJS中直接使用完整的jQuery也是非常容易的。只需要安装jQuery，并在index.html中，保证在angular.js引入之前引入jQuery.js。AngularJS会自动将angular.element绑定到jQuery上。也就是，在Directive中,会自动使用jQuery来解析界面元素，我们获取的element会自动变为jQuery对象。
 transclude：将指令作为容器，也就是标签可以含有body，并将body放入template的指定位置，在模板中通过ng-transclude来指定存放位置。

 * @returns {{restrict: string, require: string, transclude: boolean, scope: {}}}
 * @constructor
 */
import './tree.css';

const Tree = () => {
    return {
        restrict: 'E',
        scope: {
            treeData: '='
        },
        link: (scope, element, attrs) => {
            scope.isLeaf = function(item){
                if(item.children){
                    return false;
                }else{
                    return true;
                }
            };
            scope.itemExpended = function(item, $event){
                item.$$isExpend = ! item.$$isExpend;
                $event.stopPropagation();
            };
        }
    }
};

export default Tree;